<template>
  <el-form
    ref="ruleFormRef"
    style="max-width: 800px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <h2>客户档案</h2>
    <div class="form-section">
      <h3>基本信息</h3>
      <el-form-item label="客户名称" prop="customerName" required>
        <el-input v-model="ruleForm.customerName" />
      </el-form-item>

      <el-form-item label="客户类别" prop="customerType" required>
        <el-select v-model="ruleForm.customerType" placeholder="--请选择--">
          <el-option label="汽车制造商" value="汽车制造商" />
          <el-option label="零部件供应商" value="零部件供应商" />
          <el-option label="服务提供商" value="服务提供商" />
        </el-select>
      </el-form-item>

      <el-form-item label="需求方式" prop="demandType">
        <el-select v-model="ruleForm.demandType" placeholder="--请选择--">
          <el-option label="电话咨询" value="电话咨询" />
          <el-option label="邮件联系" value="邮件联系" />
          <el-option label="现场拜访" value="现场拜访" />
        </el-select>
      </el-form-item>

      <el-form-item label="所在省份" prop="province">
        <el-select v-model="ruleForm.province" placeholder="--请选择--">
          <el-option label="未知" value="未知" />
          <el-option label="北京" value="北京" />
          <el-option label="上海" value="上海" />
          <el-option label="广东" value="广东" />
        </el-select>
      </el-form-item>

      <el-form-item label="所在市区" prop="city">
        <el-select v-model="ruleForm.city" placeholder="--请选择--">
          <el-option label="未知" value="未知" />
          <el-option label="北京" value="北京" />
          <el-option label="上海" value="上海" />
          <el-option label="广州" value="广州" />
        </el-select>
      </el-form-item>

      <el-form-item label="来源渠道" prop="sourceChannel">
        <el-select v-model="ruleForm.sourceChannel" placeholder="--请选择--">
          <el-option label="现有客户" value="现有客户" />
          <el-option label="网络推广" value="网络推广" />
          <el-option label="展会获取" value="展会获取" />
        </el-select>
      </el-form-item>

      <el-form-item label="所属行业" prop="industry">
        <el-select v-model="ruleForm.industry" placeholder="--请选择--">
          <el-option label="零售" value="零售" />
          <el-option label="制造" value="制造" />
          <el-option label="服务" value="服务" />
        </el-select>
      </el-form-item>

      <el-form-item label="客户价值" prop="customerValue">
        <el-select v-model="ruleForm.customerValue" placeholder="--请选择--">
          <el-option label="极高" value="极高" />
          <el-option label="高" value="高" />
          <el-option label="中" value="中" />
          <el-option label="低" value="低" />
        </el-select>
      </el-form-item>

      <el-form-item label="信用等级" prop="creditRating">
        <el-select v-model="ruleForm.creditRating" placeholder="--请选择--">
          <el-option label="高" value="高" />
          <el-option label="中" value="中" />
          <el-option label="低" value="低" />
        </el-select>
      </el-form-item>

      <el-form-item label="公司地址" prop="companyAddress">
        <el-input v-model="ruleForm.companyAddress" />
      </el-form-item>

      <el-form-item label="公司简介" prop="companyIntro">
        <el-input type="textarea" v-model="ruleForm.companyIntro" :rows="4" />
      </el-form-item>
    </div>

    <div class="form-section">
      <h3>主要联系人信息</h3>
      <el-form-item label="联系人姓名" prop="contactName">
        <el-input v-model="ruleForm.contactName" />
      </el-form-item>

      <el-form-item label="性别" prop="gender">
        <el-radio-group v-model="ruleForm.gender">
          <el-radio label="男">男</el-radio>
          <el-radio label="女">女</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="部门" prop="department">
        <el-input v-model="ruleForm.department" />
      </el-form-item>

      <el-form-item label="生日" prop="birthday">
        <el-date-picker
          v-model="ruleForm.birthday"
          type="date"
          placeholder="选择日期"
        />
      </el-form-item>
    </div>

    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        保存
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

const route = useRoute();
const router = useRouter();

interface RuleForm {
  customerName: string;
  customerType: string;
  demandType: string;
  province: string;
  city: string;
  sourceChannel: string;
  industry: string;
  customerValue: string;
  creditRating: string;
  companyAddress: string;
  companyIntro: string;
  contactName: string;
  gender: string;
  department: string;
  birthday: string | Date | null;
}

const formSize = ref<ComponentSize>('default');
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  customerName: '',
  customerType: '',
  demandType: '',
  province: '',
  city: '',
  sourceChannel: '',
  industry: '',
  customerValue: '',
  creditRating: '',
  companyAddress: '',
  companyIntro: '',
  contactName: '',
  gender: '男',
  department: '',
  birthday: null
});

const rules = reactive<FormRules<RuleForm>>({
  customerName: [
    { required: true, message: '客户名称不能为空', trigger: 'blur' }
  ],
  customerType: [
    { required: true, message: '客户类别不能为空', trigger: 'change' }
  ],
  contactName: [
    { required: false, message: '联系人姓名不能为空', trigger: 'blur' }
  ]
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!');
      axios({
        url: 'http://localhost:5048/api/Customer/Create', // 请根据实际API调整
        method: 'post',
        data: ruleForm
      }).then((res) => {
        console.log(res);
        if (res.data.code == 202) {
          ElMessage.success("客户添加成功!");
          router.push("/customer/list"); // 假设有客户列表页面
        } else {
          ElMessage.error("添加失败");
        }
      }).catch(error => {
        console.error('提交失败:', error);
        ElMessage.error("系统错误，请稍后重试");
      });
    } else {
      console.log('error submit!', fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<style scoped>
.form-section {
  margin-bottom: 20px;
  border: 1px solid #ebeef5;
  padding: 15px;
  border-radius: 4px;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}

h3 {
  margin-top: 0;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}
</style>